<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="jpath" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<script type="text/javascript" src="${jpath}/static/FrontStatic/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${jpath}/static/FrontStatic/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="${jpath}/static/FrontStatic/css/bootstrap.min.css"/>
<link href="${jpath}/static/FrontStatic/css/main.css" rel="stylesheet" type="text/css" />
<link href="${jpath}/static/FrontStatic/css/sqjy.css" rel="stylesheet" type="text/css" />
<title>无标题文档</title>
</head>

<body>
	<div class="bg">
        <div class="row title">
            <div class="col-2" align="center">
               <a href="javascript:void(0);" onclick="history.go(-1)"> <img src="${jpath}/static/FrontStatic/image/back_1.png" /></a>
            </div>
            <div class="col-8" align="center">诉求建议</div>
            <div class="col-2" align="center">
            </div>
        </div>
        <div class="row row_all">
            <div class="col-12">
                <div class="row con">
                    <div class="col-4">
                       <img  src="${jpath}${userlist.attachmentPath }" />
                    </div>
                    <div class="col-8">
                    	<input type="hidden" id="AComplaintPeople" value="${userlist.usersId }">
                        <h6 class="con_title">${userlist.enterpriseName }</h6>
                        <p class="con_p">${userlist.companyProfile }</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row line">
            <div class="col-12">
            </div>
        </div>
        <div class="row row_all">
            <div class="col-12">
                <div class="row con_l">
                    <div class="col-4"><span id="con_l_1" class="con_l_img1_1 div_span">非常满意</span></div>
                    <div class="col-4 "><span id="con_l_2" class="con_l_img2_1">满意</span></div>
                    <div class="col-4 "><span id="con_l_3" class="con_l_img3_1">不满意</span></div>
                </div>
            </div>
        </div>
        <div class="row line">
            <div class="col-12">
            </div>
        </div>

        <div class="row row_all">
            <div class="col-12 judge">
                <div class="row">
                    <div class="col-4" align="left">
                        <span class="judge_span">态度良好</span>
                    </div>
                    <div class="col-4" align="center">
                        <span>态度良好</span>
                    </div>
                    <div class="col-4" align="right">
                        <span>态度良好</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row row_all">
            <div class="col-12 judge">
                <div class="row">
                    <div class="col-4" align="left">
                        <span>态度良好</span>
                    </div>
                    <div class="col-4" align="center">
                        <span>态度良好</span>
                    </div>
                    <div class="col-4" align="right">
                        <span>态度良好</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row line">
            <div class="col-12">
            </div>
        </div>

        <div class="row row_all">
            <div class="col-12 foot">
	            <textarea rows="8" id="ComplaintContent" placeholder="请输入您的评价"></textarea>
	            <div id="btn">提交</div>
            </div>
        </div>
    </div>
<script>
    $(function(){
        $(".con_l_img1").click(function(){
            var _this=$(this);
            console.log(_this.css("background-image"));
        });
        
        $("#con_l_2").click(function(){
        	var className=$(this).attr("class");
        	if(className.indexOf("con_l_img2_1")!=-1){
        		$(this).removeClass("con_l_img2_1");
        		
        		$(this).addClass("con_l_img2_2 cheched");
        		
        		if($("#con_l_1").attr("class").indexOf("con_l_img1_2")!=-1){
	        		$("#con_l_1").removeClass("con_l_img1_2 cheched");
	        		$("#con_l_1").addClass("con_l_img1_1");
        		}
        		if($("#con_l_3").attr("class").indexOf("con_l_img3_2")!=-1){
	        		$("#con_l_3").removeClass("con_l_img3_2 cheched");
	        		$("#con_l_3").addClass("con_l_img3_1");
        		}
        	}else{
        		$(this).removeClass("con_l_img2_2 cheched");
        		$(this).addClass("con_l_img2_1");
        	}
        });
        
        $("#con_l_1").click(function(){
        	var className=$(this).attr("class");
        	if(className.indexOf("con_l_img1_1")!=-1){
        		$(this).removeClass("con_l_img1_1");
        		$(this).addClass("con_l_img1_2 cheched");
        		
        		if($("#con_l_2").attr("class").indexOf("con_l_img2_2")!=-1){
	        		$("#con_l_2").removeClass("con_l_img2_2 cheched");
	        		$("#con_l_2").addClass("con_l_img2_1");
        		}
        		
        		if($("#con_l_3").attr("class").indexOf("con_l_img3_2")!=-1){
	        		$("#con_l_3").removeClass("con_l_img3_2 cheched");
	        		$("#con_l_3").addClass("con_l_img3_1");
        		}
        	}else{
        		$(this).removeClass("con_l_img1_2 cheched");
        		$(this).addClass("con_l_img1_1");
        	}
        });
        
        $("#con_l_3").click(function(){
        	var className=$(this).attr("class");
        	if(className.indexOf("con_l_img3_1")!=-1){
        		$(this).removeClass("con_l_img3_1");
        		$(this).addClass("con_l_img3_2 cheched");
        		if($("#con_l_2").attr("class").indexOf("con_l_img2_2")!=-1){
	        		$("#con_l_2").removeClass("con_l_img2_2 cheched");
	        		$("#con_l_2").addClass("con_l_img2_1");
        		}
        		if($("#con_l_1").attr("class").indexOf("con_l_img1_2")!=-1){
	        		$("#con_l_1").removeClass("con_l_img1_2 cheched");
	        		$("#con_l_1").addClass("con_l_img1_1");
        		}
        	}else{
        		$(this).removeClass("con_l_img3_2 cheched");
        		$(this).addClass("con_l_img3_1");
        	}
        });
        
        $("#btn").click(function(){
        	var People=$("#AComplaintPeople").val();
        	var Evaluation="";
        	var content=$("#ComplaintContent").val();
        	var taidu=$(".cheched").text();
        	$(".judge_span").each(function(i){
			   Evaluation+=$(this).text();
			   Evaluation+=",";
			});
			var pra={
					AComplaintPeople:People,
					Evaluation:Evaluation,
					ComplaintContent:content,
					Satisfaction:taidu
					};
			$.post("${jpath}/frontSuggest/Complaints",pra,function(data){
					var json=$.parseJSON(data);
					console.log(json);
					location.href="${jpath}/front/index";
				}
			);
		});
        $(".judge span").click(function(){
            var _this=$(this);
            if($(_this).is('.judge_span')){
                _this.removeClass("judge_span");
            }else{
                _this.addClass("judge_span");
            }
        });
    });
</script>

</body>
</html>
 